<template>
	<view style="background-color: #f7f7f7;">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;">经营统计</view>
			<view class="card">
				<view class="line"></view>
				<!-- 收入和订单量统计 -->
				<view class="statistics">
					<view class="stat-item">
						<image src="/static/income.png"
							style="width: 35rpx; height: 30rpx; background-color: #ff521b; padding: 10rpx;"></image>
						<view class="amount">￥{{accTotal}}</view>
						<view class="label">收入</view>
					</view>
					<view class="stat-item">
						<image src="/static/num.png"
							style="width: 35rpx; height: 30rpx; background-color: #378ffd; padding: 10rpx;"></image>
						<view class="amount">{{orders}}</view>
						<view class="label">订单量</view>
					</view>
				</view>
			</view>


			<view class="card">
				<view class="income-chart">
					<text class="chart-title">收入分布</text>
					<view class="line2"></view>
					<canvas canvas-id="incomePieChart" id="incomePieChart" class="chart-canvas"
						style="width: 500rpx; height: 500rpx;"></canvas>
				</view>
			</view>

			<view class="card">
				<view class="order-chart">
					<text class="chart-title">订单分布</text>
					<view class="line2"></view>
					<canvas canvas-id="orderBarChart" id="orderBarChart" class="chart-canvas"
						style="width: 500rpx; height: 500rpx;"></canvas>
				</view>
			</view>
		</view>
		<view style="height: 1000rpx;"></view>
	</view>

</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	// import { uChartsFun } from '@/utils/u-charts-utils.js';

	//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
	import demodata from '@/mockdata/demodata.json';

	import request from '@/utils/request.js';

	export default {
		data() {
			return {
				incomePieChart: {},
				orderBarChart: {},
				mInfo: null,
				accTotal: 0,
				orders: 0,
				infoList:[],
				categories:[],
				dataList:[]
			};
		},
		onShow() {
			//#ifdef MP-ALIPAY || MP-WEIXIN
			this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
			//#endif
			this.cWidth = uni.upx2px(600);
			this.cHeight = uni.upx2px(400);
			this.getServerData();
			this.mInfo = uni.getStorageSync('userinfo')
			this.getAccTotal()
			this.getOrders()
			this.getInfo()
			this.getServerData()
			// console.log(this.mInfo)
		},
		methods: {
			getAccTotal() {
				const that = this
				request({
					url: 'notice/fyMoneyLog/getCountMoney?userId=' + this.mInfo.mid,
					method: 'GET',
					success(res) {
						// console.log(res.data)
						if (res.data.code == 200) {
							that.accTotal = res.data.data.totalIncome
						}
					}
				})
			},
			getOrders() {
				const that = this
				request({
					url: 'offer/orders/selectOrdersCount/' + this.mInfo.mid,
					method: 'GET',
					success(res) {
						// console.log(res.data)
						if (res.data.code == 200) {
							that.orders = res.data.data
						}
					}
				})
			},
			getInfo(){
				const that = this
				request({
					url: 'evaluate/details/tongji/' + this.mInfo.mid,
					method: 'GET',
					success(res) {
						console.log(111,res.data)
						if (res.data.code == 200) {
							that.categories = []
							that.dataList = []
							that.infoList = res.data.data
							// console.log(222,that.infoList.length)
							for(let i=0; i<that.infoList.length; i++){
								that.categories.push(that.infoList[i].name)
								 that.dataList.push(that.infoList[i].data)
							}
							// console.log(1111,that.categories,that.dataList)
						}
					}
				})
			},

			backPage() {
				uni.navigateBack();
			},
			//模拟从服务器获取数据
			getServerData() {
				const that = this
				setTimeout(() => {
					console.log(that.infoList)
					const result = {
					    series: that.infoList
					}
					const rectangle = {
						categories: that.categories,
						series:[{
							name:'销售部',
							data:that.dataList
						}]
					}
					// console.log(rectangle)
					// console.log(demodata.Column)
					// 需要自行拼接chartsData
					let chartsData = JSON.parse(JSON.stringify(result))
					let type2dData = JSON.parse(JSON.stringify(rectangle))
					this.drawCharts("incomePieChart", chartsData);
					this.draw2dCharts("orderBarChart", type2dData);
				}, 500);
			},
			// #ifdef H5 
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					context: ctx, // v2.0版本必须要传context
					type: 'pie', // 修改为饼图类型
					fontSize: 15,
					padding: [15, 35, 0, 0],
					dataLabel: true,
					dataPointShape: true,
					series: data.series, // 饼图只需series数据
					animation: true,
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						pie: {
							offsetAngle: 0,
							labelWidth: 10,
							legendHover: true,
							itemStyle: 'arc'
							// 使用 formatter 函数自定义数据标签显示
						}
					}
				});
			},
			// #endif 
			// #ifdef MP-WEIXIN
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					context: ctx, // v2.0版本必须要传context
					type: 'pie', // 修改为饼图类型
					fontSize: 10,
					padding: [15, 35, 0, 0],
					dataLabel: true,
					dataPointShape: true,
					series: data.series, // 饼图只需series数据
					animation: true,
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						pie: {
							offsetAngle: 0,
							labelWidth: 10,
							legendHover: true,
							itemStyle: 'arc'
							// 使用 formatter 函数自定义数据标签显示
						}
					}
				});
			},
			// #endif
			// #ifdef H5 
			draw2dCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					context: ctx,
					type: 'column',
					fontSize: 10,
					padding: [20, 100, 20, 25],
					dataLabel: true,
					dataPointShape: true,
					categories: data.categories,
					series: data.series,
					animation: true,
					width: 350,
					height: 300,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						data: [{
							min: 0,
							axisLine: false,
							//注意，v2.0版本的format变成了formatter
							// formatter:(val)=>{return val.toFixed(0)+'元'},
						}]
					},
					extra: {
						column: {
							type: 'group',
							width: 30,
						}
					}
				});
			},
			// #endif

			// #ifdef MP-WEIXIN
			draw2dCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					context: ctx,
					type: 'column',
					fontSize: 10,
					padding: [20, 100, 20, 25],
					dataLabel: true,
					dataPointShape: true,
					categories: data.categories,
					series: data.series,
					animation: true,
					width: 350,
					height: 300,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						data: [{
							min: 0,
							axisLine: false,
							//注意，v2.0版本的format变成了formatter
							// formatter:(val)=>{return val.toFixed(0)+'元'},
						}]
					},
					extra: {
						column: {
							type: 'group',
							width: 30,
						}
					}
				});
			},
			// #endif
			tap(e, id) {
				uChartsInstance[id].showToolTip(e)
			}
		}
	}
</script>

<style>
	@import "@/common/app.css";

	.card {
		border-radius: 20px;
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx 20rpx;
	}

	.line {
		width: 100%;
		height: 1px;
		background-color: gray;
		margin: 20rpx 10rpx;
	}

	.line2 {
		width: 100%;
		height: 2px;
		background-color: gray;
		margin: 20rpx 10rpx;
	}

	.date-selector {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.date-selector .select-item {
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
		cursor: pointer;
	}

	.date-selector .select-item.active {
		background-color: #2c82ff;
		color: white;
	}

	.statistics {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.stat-item {
		text-align: center;
		margin: 40rpx 0;
	}

	.amount {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.label {
		font-size: 24rpx;
	}

	.chart-title {
		font-size: 28rpx;
	}

	.chart-canvas {
		width: 100%;
		height: 200rpx;
	}

	.back-btn {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.back-icon {
		width: 30px;
		height: 30px;
	}

	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 80rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}

	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 70rpx;
		left: 30rpx;
	}
</style>